<template>
  <div class="container">
    <menu-item></menu-item>
    <div class="content-wrap">
      <div class="header">
        <div
          @click="hanleBtn(1)"
          :class="{ abled: route.fullPath == '/intro' }"
          class="tab fixed"
        >
          市场简介
        </div>
        <div
          @click="hanleBtn(2)"
          :class="{ abled: route.fullPath == '/distribution' }"
          class="tab fixed"
        >
          市场分布
        </div>
        <div
          @click="hanleBtn(3)"
          :class="{ abled: route.fullPath == '/institution' }"
          class="tab fixed"
        >
          管理制度
        </div>
        <div
          @click="hanleBtn(4)"
          :class="{ abled: route.fullPath == '/personnel' }"
          class="tab fixed"
        >
          管理人员
        </div>
        <div
          @click="hanleBtn(5)"
          :class="{ abled: route.fullPath == '/food' }"
          class="tab remaining"
        >
          食品安全管理
        </div>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component
              :is="Component"
              :key="$route.name"
              v-if="$route.meta.keepAlive"
            />
          </keep-alive>
          <component
            :is="Component"
            :key="$route.name"
            v-if="!$route.meta.keepAlive"
          />
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import menuItem from "@/components/common/menuItem.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const actived = ref("1");
const router = useRouter();
const route = useRoute();
const hanleBtn = (e) => {
  actived.value = e;
  if (e == "2") {
    router.push({ path: "/distribution" });
  } else if (e == "3") {
    router.push({ path: "/institution" });
  } else if (e == "4") {
    router.push({ path: "/personnel" });
  } else if (e == "5") {
    router.push({ path: "/food" });
  } else {
    router.push({ path: "/intro" });
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content-wrap {
    height: 480px;
    // flex: 1;
    display: flex;
    flex-direction: column;
    .header {
      height: 50px;
      background: #39c1fe;
      background: linear-gradient(
        to right,
        #3dd9fe,
        #3191fd
      ); /* 定义从左到右的渐变 */
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      display: flex;
      align-items: flex-end;
      color: #fff;
      font-size: 14px;
      .tab {
        padding: 6px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .fixed {
        width: 14%;
      }
      .remaining {
        flex: 1;
      }
      .abled {
        transition: all 0.3s;
        font-weight: 600;
        background: #284fa2;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
    }
    .content {
      position: relative;
      overflow: hidden;
      height: 100%;
      // background: #3257a6;
      background-color: rgba(50, 87, 166, 0.7); /* 白色背景，透明度为 50% */
      border-radius: 20px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      // opacity: 0.8;
      padding: 16px;
      color: #fff;
    }
  }
}
</style>
